<template>
  <div class="departments-container">
    <!-- 卡片 -->
    <el-card>
      <!-- tabs -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first">
          <!-- layout -->
          <el-row type="flex" justify="space-between">
            <el-col :span="6">深圳传智博客教育科技股份有限公司</el-col>
            <el-col :span="4" class="right-col">
              <span class="leader">负责人</span>
              <el-dropdown>
                <!-- 用户默认看到的部分 -->
                <span class="el-dropdown-link">
                  新增
                  <i class="el-icon-arrow-down el-icon--righr" />
                </span>
                <!-- 展开部分 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      type="text"
                      @click="showDialog('')"
                    >添加子部分</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <!-- 分割线 -->
          <el-divider />
          <!-- 底部 -->
          <el-tree v-loading="loading" :data="departs">
            <el-row
              slot-scope="{ data }"
              type="flex"
              justify="space-between"
              style="width:100%"
            >
              <el-col :span="6">{{ data.name }}</el-col>
              <el-col :span="4" class="right-col">
                <span class="leader">{{ data.manager }}</span>
                <el-dropdown>
                  <!-- 用户默认看到的部分 -->
                  <span class="el-dropdown-link">
                    <!-- 图标 -->
                    <i class="el-icon-arrow-down el-icon--righr" />
                  </span>
                  <!-- 展开部分 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button
                        type="text"
                        @click="showDialog(data.id)"
                      >添加子部门</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        type="text"
                        @click="enterEdit(data.id)"
                      >查看部门</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        type="text"
                        @click="enterDelete(data.id)"
                      >删除部门</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
      <!-- 下拉菜单 -->
      <!-- 文字按钮 -->
    </el-card>

    <!-- dialog -->
    <!-- dialog 弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      @closed="closedHandler"
    >
      <el-form ref="depForm" :model="form" :rules="rules">
        <el-form-item
          prop="name"
          label="部门名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          prop="code"
          label="部门编码"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.code" autocomplete="off" />
        </el-form-item>
        <el-form-item
          prop="manager"
          label="部门负责人"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.manager"
            placeholder="请选择"
            @focus="getManagers"
          >
            <el-option
              v-for="item in managerList"
              :key="item.id"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="introduce"
          label="部门介绍"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandler">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDepartments,
  addDepartments,
  getDepartmentById,
  editDepartment,
  delDepartmentById
} from '../../api/departments'
import { getEmployeeSimple } from '../../api/employees'
export default {
  name: 'Departments',
  data() {
    return {
      loading: false,
      activeName: 'first',
      dialogFormVisible: false,
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      formLabelWidth: '120px',
      // tree 插件
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      // 管理员列表
      managerList: [],
      // 校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度为1-50个字符', trigger: 'blur' },
          {
            validator: async(rule, value, callback) => {
              // console.log(this.form)
              // 获取数据
              const res = await getDepartments()
              // console.log(res)
              const checkRes = res.depts.some(v => {
                if (this.form.id) {
                  // 编辑id不相等,但是value相等
                  if (value === v.name && this.form.id !== v.id) {
                    return true
                  }
                } else {
                  // 新增
                  if (value === v.name) {
                    // 存在
                    return false
                  }
                }
              })
              checkRes === true
                ? callback(new Error('部门名称不能重复'))
                : callback

              // const filterRes = res.depts.filter(v => {
              //   // 简化写法 some 有一个 不满足条件
              //   // some 只要有任何一个那么和输入的值相同 就是true
              //   !res.depts.some(v => value === v.name)
              //     ? callback()
              //     : callback(new Error('有重复名称,请重新输入!'))

              //   // // 简化写法 filter
              //   // res.depts.filter(v => value === v.name).length === 0
              //   //   ? callback()
              //   //   : callback(new Error('有重复名称,请重新输入!'))
              // })

              // 标准写法 但没有编辑的认证
              // const filterRes = res.depts.filter(v => {

              // if (value === v.name) {
              //   return true
              // } else {
              //   return false
              // }
              // })
              // if (filterRes.length === 0) {
              //   // 不重复
              //   callback()
              // } else {
              //   // 有重复
              //   callback(new Error('有重复名称,请重新输入!'))
              // }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编辑不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度为1-50个字符', trigger: 'blur' },
          {
            validator: async(rule, value, callback) => {
              const res = await getDepartments()

              // 有编辑认证
              const checkRes = res.depts.some(v => {
                if (this.form.id) {
                  // 编辑id不相等,但是value相等
                  if (value === v.code && this.form.id !== v.id) {
                    return true
                  }
                } else {
                  // 新增
                  if (value === v.code) {
                    // 存在
                    return false
                  }
                }
              })
              checkRes === true
                ? callback(new Error('部门名称不能重复'))
                : callback

              // const filterRes = res.depts.filter(v => {
              //   // 简化写法 some 有一个 不满足条件
              //   // some 只要有任何一个那么和输入的值相同 就是true
              //   !res.depts.some(v => value === v.code)
              //     ? callback()
              //     : callback(new Error('有重复编辑,请重新输入!'))

              //   // 简化写法 filter
              //   // res.depts.filter(v => value === v.code).length === 0
              //   //   ? callback()
              //   //   : callback(new Error('有重复编辑,请重新输入!'))
              // })

              // const filterRes = res.depts.filter(v => {
              // 标准方法 但没有编辑的认证
              // if (value === v.code) {
              //   return true
              // } else {
              //   return false
              // }
              // })
              // if (filterRes.length === 0) {
              //   // 不重复
              //   callback()
              // } else {
              //   // 有重复
              //   callback(new Error('有重复编辑,请重新输入!'))
              // }
            },
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '长度为1-300个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed: {
    title() {
      return this.form.id ? '编辑部门' : '新增部门'
    }
  },

  created() {
    this.getDate()
  },
  methods: {
    // 删除部门
    enterDelete(id) {
      // console.log(id)
      this.$confirm('确定要删除该部门吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 如果点击了确定就会进入then
          const delRes = await delDepartmentById(id) // 返回promise对象
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getDate()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 弹框关闭
    closedHandler() {
      // 上一次是编辑 清空
      if (this.form.id) {
        this.form = {
          code: '',
          introduce: '',
          manager: '',
          name: '',
          pid: ''
        }
      } else {
        // 上一次是新增不清空
      }
      // 清空表单的验证结果
      this.$nextTick(() => {
        this.$refs.depForm.clearValidate()
      })
    },
    // 进入编辑状态
    async enterEdit(id) {
      // 获取数据
      // console.log(id)
      const res = await getDepartmentById(id)
      // 设置数据
      this.form = res
      // 弹框
      this.dialogFormVisible = true
    },
    cancelHandler() {
      this.dialogFormVisible = false
      this.$refs.depForm.resetFields()
      this.form = {
        code: '',
        introduce: '',
        manager: '',
        name: ''
      }
    },
    // 递归 必须有个函数 基于给定的 pid 返回满足条件的数组
    formatData(list, pid) {
      return list.filter(v => {
        if (v.pid === pid) {
          // 筛选子节点的条件是 循环数组的 每一项的 pid 和 当前这一项的 id 相等
          // this 组件对象
          v.children = this.formatData(list, v.id)
          return true
        } else {
          return false
        }
      })
    },
    // 获取组织架构数据
    async getDate() {
      // 开启loading
      this.loading = true
      const res = await getDepartments()

      // // 递归 必须有个函数 基于给定的 pid 返回满足条件的数组
      // function formatData(list, pid) {
      //   return list.filter(v => {
      //     if (v.pid === pid) {
      //       // 筛选子节点的条件是 循环数组的 每一项的 pid 和 当前这一项的 id 相等
      //       // this 组件对象
      //       v.children = this.formatData(list, v.id)
      //       return true
      //     } else {
      //       return false
      //     }
      //   })
      // }

      // 第一次筛选 pid 是 ''
      const treeRes = this.formatData(res.depts, '')
      // 直接赋值即可
      this.departs = treeRes
      // 关闭loading
      setTimeout(() => {
        this.loading = false
      }, 300)

      // //  筛选pid 为 ''顶级节点
      // const rootTree = res.depts.filter(v => {
      //   if (v.pid === '') {
      //     return true
      //   } else {
      //     return false
      //   }
      // })
      // // 筛选出 children 子节点
      // rootTree.forEach(rV => {
      //   const children = res.depts.filter(v => {
      //     if (v.pid === rV.id) {
      //       return true
      //     } else {
      //       return false
      //     }
      //   })
      //   console.log(res)
      //   rV.children = children
      // })
      // this.departs = rootTree
    },
    // 显示新增框
    showDialog(pid) {
      // 设置给表单 pid 直接存到表单中 不让用户输入
      this.form.pid = pid
      // 弹框
      this.dialogFormVisible = true
    },
    // 提交表单
    submitForm() {
      this.$refs.depForm.validate(async valid => {
        if (valid) {
          if (this.form.id) {
            // 编辑 form 包含了ID
            const editRes = await editDepartment(this.form)
            this.$message.success('编辑成功')
          } else {
            // 新增
            // 校验通过 提交数据
            const addRes = await addDepartments(this.form)
            this.$message.success('新增成功')
          }
          // 清空数据
          this.$refs.depForm.resetFields()
          // 关闭
          this.dialogFormVisible = false
          // 刷新
          this.getDate()
          this.form = {
            code: '',
            introduce: '',
            manager: '',
            name: ''
          }
        } else {
          console.log('提交信息错误!!')
          return false
        }
      })
    },
    async getManagers() {
      const res = await getEmployeeSimple()
      this.managerList = res
    }
  }
}
</script>

<style lang="scss">
.departments-container {
  padding: 20px;

  font-size: 14px;
  .right-col {
    text-align: right;
  }
  .leader {
    margin-right: 10px;
  }
  .el-tabs__content {
    padding: 20px 90px;
  }

  .el-divider {
    margin-top: 10px;
  }
}
</style>
